<template>
	<view class="pageItem">
		<view class="main">
			<view class="canvas-container">
				<view :animation="animationData" class="canvas-content" id="zhuanpano" style="">
					<view class="canvas-line">
						<view class="canvas-litem" v-for="(item,index) in list" :key="index"
							:style="{transform:'rotate('+(index * width + width / 2)+'deg)'}"></view>
					</view>
					<view class="canvas-list">
						<view class="canvas-item"
							:style="{transform: 'rotate('+(index * width)+'deg)', zIndex:index, }"
							v-for="(iteml,index) in list" :key="index">
							<view class="canvas-item-text" :style="'transform:rotate('+(index )+')'">
								<text class="txt">{{iteml.name}}</text>
								<text class="icon-awrad iconfont" :class="iteml.icon"></text>
							</view>
						</view>
					</view>
				</view>
				<view @tap="playReward" class="canvas-btn" v-bind:class="btnDisabled">{{$t('lottery.start')}}</view>
			</view>
			<view class="log"><label class="btn" @click="$gotopage" data-url="/pages/my/drawLog">{{$t('lottery.log')}}</label></view>
			<view class="rule">
				<view class="r_tit">{{$t('use.rule')}}</view>
				<block v-for="(item,index) in 6">
					<view class="r_row">这里是规则的说明，由后台传入</view>
				</block>
			</view>
		</view>
		<image class="bg_img" src="../../static/img/caidai.png" mode="widthFix"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						"name": "1",
						"value": "1",
						"tip": "1 DIAMON",
						icon: 'icon-zuanshi',
					},
					{
						"name": "5",
						"value": "5",
						"tip": "5 DIAMON",
						icon: 'icon-zuanshi',
					},
					{
						"name": "20",
						"value": "20",
						"tip": "20 DIAMON",
						icon: 'icon-zuanshi',
					},
					{
						"name": "100",
						"value": "100",
						"tip": "100 DIAMON",
						icon: 'icon-zuanshi',
					},
					{
						"name": "500",
						"value": "500",
						"tip": "500 DIAMON",
						icon: 'icon-zuanshi',
					},
					{
						"name": "Thank",
						"value": "0",
						icon: 'icon-no_jiang',
						isNoPrize: true, // 是否未中奖
					},
					{
						"name": "0.5",
						"value": "0.5",
						"tip": "$ 0.5",
						icon: 'icon-xianjin',
					}
				],
				width: 0,
				animationData: {},
				btnDisabled: '',
			}
		},
		onLoad: function() {
			// 获取奖品列表
			this.width = 360 / this.list.length
		},
		methods: {
			animation(index, duration) {
				//中奖index
				var list = this.list;
				// var awardIndex = 1 || Math.round(Math.random() * (awardsNum.length - 1)); //随机数
				var runNum = 6;

				// 旋转角度
				this.runDeg = this.runDeg || 0;
				this.runDeg = this.runDeg + (360 - this.runDeg % 360) + (360 * runNum - index * (360 / list.length)) + 1
				//创建动画
				var animationRun = uni.createAnimation({
					duration: duration,
					timingFunction: 'ease'
				})
				animationRun.rotate(this.runDeg).step();
				this.animationData = animationRun.export();
				this.btnDisabled = 'disabled';

			},
			//发起抽奖
			playReward() {
				let index = 4,  //中奖第几个，后台传过来
					duration = 4000
				this.animation(index, duration)

				setTimeout(() => {
					uni.showModal({
						content: this.list[index].tip,
						showCancel:false,
						confirmText:this.$t('use.know'),
						confirmColor:"#ff2b63"
					})
					this.btnDisabled = '';
					// document.getElementById('zhuanpano').style=''
				}, duration + 150)
			},

		}

	}
</script>
<style lang="scss">
page{
	background: $lottery_bg_color;
}
.pageItem{
	width: 750upx;
}
.bg_img{
	width: 100%;
	position: absolute;
	z-index: 1;
	top: 0;
}
.main{
	position: relative;
	z-index: 10;
	padding-top: calc(var(--status-bar-height) + 10vw);
	/* 转盘 */
	.canvas-container {
		margin: 0 auto;
		position: relative;
		width: 600upx;
		height: 600upx;
		background: url('../../static/img/circle.png') no-repeat;
		background-size: cover;
		border-radius: 50%;
		.canvas-content {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
			display: block;
			width: 600upx;
			height: 600upx;
			border-radius: inherit;
			.canvas-list {
				position: absolute;
				left: 0;
				top: 0;
				width: inherit;
				height: inherit;
				z-index: 98;
				.canvas-item {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					color: #e4370e;
					.canvas-item-text {
						position: relative;
						display: block;
						padding-top: 46upx;
						margin: 0 auto;
						text-align: center;
						-webkit-transform-origin: 50% 300upx;
						transform-origin: 50% 300upx;
						display: flex;
						flex-direction: column;
						align-items: center;
						.txt {
							font-size: 30upx;
							font-weight: bold;
							color: $lottery_txt_color;
						}
						.icon-awrad {
							font-size: 50upx;
							margin-top: 20upx;
							color: $lottery_icon_color;
						}
					}
				}
			}
			/* 分隔线 */
			.canvas-line {
				position: absolute;
				left: 0;
				top: 0;
				width: inherit;
				height: inherit;
				z-index: 97;
				.canvas-litem {
					position: absolute;
					left: 300upx;
					top: 0;
					width: 3upx;
					height: 300upx;
					background-color: rgba(228, 55, 14, 0.4);
					overflow: hidden;
					-webkit-transform-origin: 50% 300upx;
					transform-origin: 50% 300upx;
				}
			}
		}
		/*抽奖按钮*/
		.canvas-btn {
			position: absolute;
			left: 255upx;
			top: 255upx;
			z-index: 400;
			width: 90upx;
			height: 90upx;
			border-radius: 50%;
			color: #f4e9cc;
			background-color: $lottery_btn_color;
			line-height: 90upx;
			text-align: center;
			font-size: 26upx;
			text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
			box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
			text-decoration: none;
			&::after {
				position: absolute;
				display: block;
				content: ' ';
				left: 18upx;
				top: -44upx;
				width: 0;
				height: 0;
				overflow: hidden;
				border-width: 30upx;
				border-style: solid;
				border-color: transparent;
				border-bottom-color: $lottery_btn_color;
			}
		}
	}
	.log{
		margin-top: 4vw;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 0 4%;
		.btn{
			font-size: 4vw;
			color: $main_color5;
			background: $main_color_s2;
			padding: 1vw 3vw;
			border-radius: 2vw;
		}
	}
	.rule{
		margin-top: 6vw;
		width: 90%;
		margin-left: 5%;
		padding: 4vw 5vw;
		border: 1vw solid $main_color_s2;
		border-radius: 4vw;
		background: #242526;
		.r_tit{
			width: 100%;
			text-align: left;
			font-size: 36upx;
			font-weight: bold;
			color: #ff5356;
		}
		.r_row{
			width: 100%;
			padding-top: 10upx;
			font-size: 30upx;
			color: #c1c1c1;
		}
	}
}
.canvas-btn.disabled {
	pointer-events: none;
	background: #b07a7b;
	color: #ccc;
}
.canvas-btn.disabled::after {
	border-bottom-color: #b07a7b;
}
.typecheckbox view {
	border: 1px solid #FF3637;
	background: transparent;
	color: #FF3637;
	display: flex;
	height: 60upx;
	width: 140upx;
	border-radius: 50upx;
	align-items: center;
	justify-content: center;
	display: flex;
	margin-left: 20upx;
}
.myrewards .title {
	font-family: PingFang-SC-Bold;
	font-size: 16px;
	color: #E4431A;
	letter-spacing: 0.57px;
	display: flex;
	padding-top: 36upx;
	justify-content: center;
}
</style>